<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>QQ音乐首页</title>
  <!-- 引入Tailwind CSS -->
  <script src="https://cdn.tailwindcss.com"></script>
  <!-- 引入Font Awesome -->
  <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
  
  <!-- 配置Tailwind自定义颜色和字体 -->
  <script>
    tailwind.config = {
      theme: {
        extend: {
          colors: {
            primary: '#1677ff',
            qqgreen: '#31c27c',
            graylight: '#f5f5f5',
            graytext: '#666666',
            grayborder: '#e5e5e5',
          },
          fontFamily: {
            sans: ['Inter', 'system-ui', 'sans-serif'],
          },
        },
      }
    }
  </script>
  
  <style type="text/tailwindcss">
    @layer utilities {
      .content-auto {
        content-visibility: auto;
      }
      .card-hover {
        @apply transition-all duration-300 hover:shadow-lg hover:-translate-y-1;
      }
      .nav-item {
        @apply px-3 py-2 rounded-md hover:bg-gray-100 transition-colors cursor-pointer text-sm;
      }
      .nav-item-active {
        @apply text-qqgreen font-medium;
      }
      .song-item {
        @apply flex items-center py-3 border-b border-grayborder last:border-0;
      }
    }
  </style>
</head>

<body class="bg-gray-50 font-sans">
  <!-- 顶部导航栏 - 只保留QQ音乐标识 -->
  <header class="bg-white shadow-sm sticky top-0 z-50">
    <div class="container mx-auto px-4 py-3 flex items-center justify-start">
      <div class="text-qqgreen text-2xl">
        <i class="fa fa-music mr-1"></i>
        <span class="font-bold">QQ音乐</span>
      </div>
    </div>
  </header>

  <main class="container mx-auto px-4 py-6">
    <!-- 歌单推荐部分 -->
    <section class="mb-12">
      <h2 class="text-[clamp(1.5rem,3vw,2rem)] font-bold mb-6 text-center">歌单推荐</h2>
      
      <div class="flex flex-wrap justify-center mb-6 gap-2">
        <span class="nav-item nav-item-active">为你推荐</span>
        <span class="nav-item">运动</span>
        <span class="nav-item">网络歌曲</span>
        <span class="nav-item">思念</span>
        <span class="nav-item">官方歌单</span>
        <span class="nav-item">情歌</span>
      </div>
      
      <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-5 gap-6">
        <!-- 歌单卡片1 -->
        <div class="bg-white rounded-lg overflow-hidden shadow card-hover">
          <div class="relative">
            <img src="https://picsum.photos/seed/playlist1/400/400" alt="翻唱女神J.Fla | 只因你最爱的旋律" class="w-full aspect-square object-cover">
            <div class="absolute bottom-2 right-2 bg-black bg-opacity-50 text-white text-xs px-2 py-1 rounded-full flex items-center">
              <i class="fa fa-play mr-1"></i> 891.4万
            </div>
          </div>
          <div class="p-3">
            <h3 class="font-medium text-sm truncate">翻唱女神J.Fla | 只因你最爱的旋律</h3>
            <p class="text-graytext text-xs">播放量: 891.4万</p>
          </div>
        </div>
        
        <!-- 歌单卡片2 -->
        <div class="bg-white rounded-lg overflow-hidden shadow card-hover">
          <div class="relative">
            <img src="https://picsum.photos/seed/playlist2/400/400" alt="古风女声控，优雅旋律为你而来" class="w-full aspect-square object-cover">
            <div class="absolute bottom-2 right-2 bg-black bg-opacity-50 text-white text-xs px-2 py-1 rounded-full flex items-center">
              <i class="fa fa-play mr-1"></i> 171.2万
            </div>
          </div>
          <div class="p-3">
            <h3 class="font-medium text-sm truncate">古风女声控，优雅旋律为你而来</h3>
            <p class="text-graytext text-xs">播放量: 171.2万</p>
          </div>
        </div>
        
        <!-- 歌单卡片3 -->
        <div class="bg-white rounded-lg overflow-hidden shadow card-hover">
          <div class="relative">
            <img src="https://picsum.photos/seed/playlist3/400/400" alt="想开一家早餐店，叫醒点点面面" class="w-full aspect-square object-cover">
            <div class="absolute bottom-2 right-2 bg-black bg-opacity-50 text-white text-xs px-2 py-1 rounded-full flex items-center">
              <i class="fa fa-play mr-1"></i> 52.5万
            </div>
          </div>
          <div class="p-3">
            <h3 class="font-medium text-sm truncate">想开一家早餐店，叫醒点点面面</h3>
            <p class="text-graytext text-xs">播放量: 52.5万</p>
          </div>
        </div>
        
        <!-- 歌单卡片4 -->
        <div class="bg-white rounded-lg overflow-hidden shadow card-hover">
          <div class="relative">
            <img src="https://picsum.photos/seed/playlist4/400/400" alt="好评999+英文歌！轻松解压100%" class="w-full aspect-square object-cover">
            <div class="absolute bottom-2 right-2 bg-black bg-opacity-50 text-white text-xs px-2 py-1 rounded-full flex items-center">
              <i class="fa fa-play mr-1"></i> 1239.0万
            </div>
          </div>
          <div class="p-3">
            <h3 class="font-medium text-sm truncate">好评999+英文歌！轻松解压100%</h3>
            <p class="text-graytext text-xs">播放量: 1239.0万</p>
          </div>
        </div>
        
        <!-- 歌单卡片5 -->
        <div class="bg-white rounded-lg overflow-hidden shadow card-hover">
          <div class="relative">
            <img src="https://picsum.photos/seed/playlist5/400/400" alt="书房背景音乐 沉浸于字里行间的时光" class="w-full aspect-square object-cover">
            <div class="absolute bottom-2 right-2 bg-black bg-opacity-50 text-white text-xs px-2 py-1 rounded-full flex items-center">
              <i class="fa fa-play mr-1"></i> 303.3万
            </div>
          </div>
          <div class="p-3">
            <h3 class="font-medium text-sm truncate">书房背景音乐 沉浸于字里行间的时光</h3>
            <p class="text-graytext text-xs">播放量: 303.3万</p>
          </div>
        </div>
      </div>
    </section>
    
    <!-- 新歌首发部分 -->
    <section class="mb-12 bg-graylight py-6">
      <h2 class="text-[clamp(1.5rem,3vw,2rem)] font-bold mb-6 text-center">新歌首发</h2>
      
      <!-- 仅将播放全部按钮调整到左侧，分类标签保持居中 -->
      <div class="flex items-center justify-between mb-6">
        <button class="flex items-center text-graytext border border-grayborder bg-white px-3 py-1 rounded hover:bg-gray-50 transition-colors text-sm">
          <i class="fa fa-play mr-1"></i> 播放全部
        </button>
        
        <div class="flex flex-wrap justify-center flex-1 mx-4">
          <span class="nav-item nav-item-active">最新</span>
          <span class="nav-item">内地</span>
          <span class="nav-item">港台</span>
          <span class="nav-item">欧美</span>
          <span class="nav-item">韩国</span>
          <span class="nav-item">日本</span>
        </div>
        
        <!-- 右侧留白区域，保持布局平衡 -->
        <div class="w-24"></div>
      </div>
      
      <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-0">
        <!-- 新歌1 -->
        <div class="song-item">
          <img src="https://picsum.photos/seed/song1/100/100" alt="Sabotage" class="w-12 h-12 rounded mr-3">
          <div class="flex-1 min-w-0">
            <h4 class="font-medium text-sm truncate">Sabotage</h4>
            <p class="text-graytext text-xs truncate">Bebe Rexha</p>
          </div>
          <span class="text-graytext text-xs whitespace-nowrap">02:56</span>
        </div>
        
        <!-- 新歌2 -->
        <div class="song-item">
          <img src="https://picsum.photos/seed/song2/100/100" alt="如果人人爱音乐" class="w-12 h-12 rounded mr-3">
          <div class="flex-1 min-w-0">
            <h4 class="font-medium text-sm truncate">如果人人爱音乐</h4>
            <p class="text-graytext text-xs truncate">张蔷</p>
          </div>
          <span class="text-graytext text-xs whitespace-nowrap">03:46</span>
        </div>
        
        <!-- 新歌3 -->
        <div class="song-item">
          <img src="https://picsum.photos/seed/song3/100/100" alt="你就不要想起我" class="w-12 h-12 rounded mr-3">
          <div class="flex-1 min-w-0">
            <h4 class="font-medium text-sm truncate">你就不要想起我</h4>
            <p class="text-graytext text-xs truncate">R1SE赵磊</p>
          </div>
          <span class="text-graytext text-xs whitespace-nowrap">04:30</span>
        </div>
        
        <!-- 新歌4 -->
        <div class="song-item">
          <img src="https://picsum.photos/seed/song4/100/100" alt="软肋" class="w-12 h-12 rounded mr-3">
          <div class="flex-1 min-w-0">
            <h4 class="font-medium text-sm truncate">软肋</h4>
            <p class="text-graytext text-xs truncate">李宇春</p>
          </div>
          <span class="text-graytext text-xs whitespace-nowrap">04:17</span>
        </div>
        
        <!-- 新歌5 -->
        <div class="song-item">
          <img src="https://picsum.photos/seed/song5/100/100" alt="一缕如故 《长安行》电视剧插曲" class="w-12 h-12 rounded mr-3">
          <div class="flex-1 min-w-0">
            <h4 class="font-medium text-sm truncate">一缕如故 《长安行》电视剧插曲</h4>
            <p class="text-graytext text-xs truncate">摩登兄弟刘宇宁</p>
          </div>
          <span class="text-graytext text-xs whitespace-nowrap">03:55</span>
        </div>
        
        <!-- 新歌6 -->
        <div class="song-item">
          <img src="https://picsum.photos/seed/song6/100/100" alt="向南拳挥拳的人 《新斗罗大陆》" class="w-12 h-12 rounded mr-3">
          <div class="flex-1 min-w-0">
            <h4 class="font-medium text-sm truncate">向南拳挥拳的人 《新斗罗大陆》</h4>
            <p class="text-graytext text-xs truncate">阿云嘎</p>
          </div>
          <span class="text-graytext text-xs whitespace-nowrap">04:00</span>
        </div>
        
        <!-- 新歌7 -->
        <div class="song-item">
          <img src="https://picsum.photos/seed/song7/100/100" alt="花好月圆" class="w-12 h-12 rounded mr-3">
          <div class="flex-1 min-w-0">
            <h4 class="font-medium text-sm truncate">花好月圆</h4>
            <p class="text-graytext text-xs truncate">周迅</p>
          </div>
          <span class="text-graytext text-xs whitespace-nowrap">02:34</span>
        </div>
        
        <!-- 新歌8 -->
        <div class="song-item">
          <img src="https://picsum.photos/seed/song8/100/100" alt="Renegades 《浪客剑心 最终章》" class="w-12 h-12 rounded mr-3">
          <div class="flex-1 min-w-0">
            <h4 class="font-medium text-sm truncate">Renegades 《浪客剑心 最终章》</h4>
            <p class="text-graytext text-xs truncate">ONE OK ROCK</p>
          </div>
          <span class="text-graytext text-xs whitespace-nowrap">04:04</span>
        </div>
        
        <!-- 新歌9 -->
        <div class="song-item">
          <img src="https://picsum.photos/seed/song9/100/100" alt="驯化者" class="w-12 h-12 rounded mr-3">
          <div class="flex-1 min-w-0">
            <h4 class="font-medium text-sm truncate">驯化者</h4>
            <p class="text-graytext text-xs truncate">陈俊豪 / 陈哲庚 / TGM-姜</p>
          </div>
          <span class="text-graytext text-xs whitespace-nowrap">03:28</span>
        </div>
      </div>
    </section>
    
    <!-- MV部分 -->
    <section>
      <h2 class="text-[clamp(1.5rem,3vw,2rem)] font-bold mb-6 text-center">MV</h2>
      
      <div class="flex flex-wrap justify-center mb-6 gap-2 overflow-x-auto pb-2">
        <span class="nav-item nav-item-active">精选</span>
        <span class="nav-item">内地</span>
        <span class="nav-item">韩国</span>
        <span class="nav-item">港台</span>
        <span class="nav-item">欧美</span>
        <span class="nav-item">日本</span>
      </div>
      
      <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-5 gap-6">
        <!-- MV1 -->
        <div class="bg-white rounded-lg overflow-hidden shadow card-hover">
          <div class="relative">
            <img src="https://picsum.photos/seed/mv1/400/225" alt="向南拳挥拳的人" class="w-full aspect-video object-cover">
            <div class="absolute inset-0 bg-black bg-opacity-20 flex items-center justify-center opacity-0 hover:opacity-100 transition-opacity">
              <i class="fa fa-play-circle text-white text-4xl"></i>
            </div>
            <div class="absolute bottom-2 right-2 bg-black bg-opacity-50 text-white text-xs px-2 py-1 rounded flex items-center">
              <i class="fa fa-eye mr-1"></i> 8002
            </div>
          </div>
          <div class="p-3">
            <h3 class="font-medium truncate text-center">向南拳挥拳的人 《新斗罗大陆》</h3>
            <p class="text-graytext text-sm truncate text-center">阿云嘎</p>
          </div>
        </div>
        
        <!-- MV2 -->
        <div class="bg-white rounded-lg overflow-hidden shadow card-hover">
          <div class="relative">
            <img src="https://picsum.photos/seed/mv2/400/225" alt="雨" class="w-full aspect-video object-cover">
            <div class="absolute inset-0 bg-black bg-opacity-20 flex items-center justify-center opacity-0 hover:opacity-100 transition-opacity">
              <i class="fa fa-play-circle text-white text-4xl"></i>
            </div>
            <div class="absolute bottom-2 right-2 bg-black bg-opacity-50 text-white text-xs px-2 py-1 rounded flex items-center">
              <i class="fa fa-eye mr-1"></i> 3334
            </div>
          </div>
          <div class="p-3">
            <h3 class="font-medium truncate text-center">雨</h3>
            <p class="text-graytext text-sm truncate text-center">Sunnee杨芸晴</p>
          </div>
        </div>
        
        <!-- MV3 -->
        <div class="bg-white rounded-lg overflow-hidden shadow card-hover">
          <div class="relative">
            <img src="https://picsum.photos/seed/mv3/400/225" alt="一缕如故" class="w-full aspect-video object-cover">
            <div class="absolute inset-0 bg-black bg-opacity-20 flex items-center justify-center opacity-0 hover:opacity-100 transition-opacity">
              <i class="fa fa-play-circle text-white text-4xl"></i>
            </div>
            <div class="absolute bottom-2 right-2 bg-black bg-opacity-50 text-white text-xs px-2 py-1 rounded flex items-center">
              <i class="fa fa-eye mr-1"></i> 4.2万
            </div>
          </div>
          <div class="p-3">
            <h3 class="font-medium truncate text-center">一缕如故 《长安行》电视剧插曲</h3>
            <p class="text-graytext text-sm truncate text-center">摩登兄弟刘宇宁</p>
          </div>
        </div>
        
        <!-- MV4 -->
        <div class="bg-white rounded-lg overflow-hidden shadow card-hover">
          <div class="relative">
            <img src="https://picsum.photos/seed/mv4/400/225" alt="我很好骗" class="w-full aspect-video object-cover">
            <div class="absolute inset-0 bg-black bg-opacity-20 flex items-center justify-center opacity-0 hover:opacity-100 transition-opacity">
              <i class="fa fa-play-circle text-white text-4xl"></i>
            </div>
            <div class="absolute bottom-2 right-2 bg-black bg-opacity-50 text-white text-xs px-2 py-1 rounded flex items-center">
              <i class="fa fa-eye mr-1"></i> 11万
            </div>
          </div>
          <div class="p-3">
            <h3 class="font-medium truncate text-center">我很好骗</h3>
            <p class="text-graytext text-sm truncate text-center">动力火车</p>
          </div>
        </div>
        
        <!-- MV5 -->
        <div class="bg-white rounded-lg overflow-hidden shadow card-hover">
          <div class="relative">
            <img src="https://picsum.photos/seed/mv5/400/225" alt="逐梦时空飞行" class="w-full aspect-video object-cover">
            <div class="absolute inset-0 bg-black bg-opacity-20 flex items-center justify-center opacity-0 hover:opacity-100 transition-opacity">
              <i class="fa fa-play-circle text-white text-4xl"></i>
            </div>
            <div class="absolute bottom-2 right-2 bg-black bg-opacity-50 text-white text-xs px-2 py-1 rounded flex items-center">
              <i class="fa fa-eye mr-1"></i> 1483
            </div>
          </div>
          <div class="p-3">
            <h3 class="font-medium truncate text-center">逐梦时空飞行 《声梦传奇》主题曲</h3>
            <p class="text-graytext text-sm truncate text-center">TVB</p>
          </div>
        </div>
        
        <!-- MV6 -->
        <div class="bg-white rounded-lg overflow-hidden shadow card-hover">
          <div class="relative">
            <img src="https://picsum.photos/seed/mv6/400/225" alt="What's Wrong With Me" class="w-full aspect-video object-cover">
            <div class="absolute inset-0 bg-black bg-opacity-20 flex items-center justify-center opacity-0 hover:opacity-100 transition-opacity">
              <i class="fa fa-play-circle text-white text-4xl"></i>
            </div>
            <div class="absolute bottom-2 right-2 bg-black bg-opacity-50 text-white text-xs px-2 py-1 rounded flex items-center">
              <i class="fa fa-eye mr-1"></i> 20.2万
            </div>
          </div>
          <div class="p-3">
            <h3 class="font-medium truncate text-center">What's Wrong With Me (Punk V.)</h3>
            <p class="text-graytext text-sm truncate text-center">Lil Ghost小鬼</p>
          </div>
        </div>
        
        <!-- MV7 -->
        <div class="bg-white rounded-lg overflow-hidden shadow card-hover">
          <div class="relative">
            <img src="https://picsum.photos/seed/mv7/400/225" alt="Let's Party" class="w-full aspect-video object-cover">
            <div class="absolute inset-0 bg-black bg-opacity-20 flex items-center justify-center opacity-0 hover:opacity-100 transition-opacity">
              <i class="fa fa-play-circle text-white text-4xl"></i>
            </div>
            <div class="absolute bottom-2 right-2 bg-black bg-opacity-50 text-white text-xs px-2 py-1 rounded flex items-center">
              <i class="fa fa-eye mr-1"></i> 6.6万
            </div>
          </div>
          <div class="p-3">
            <h3 class="font-medium truncate text-center">Let's Party 《和平精英》2周年庆</h3>
            <p class="text-graytext text-sm truncate text-center">吴宣仪</p>
          </div>
        </div>
        
        <!-- MV8 -->
        <div class="bg-white rounded-lg overflow-hidden shadow card-hover">
          <div class="relative">
            <img src="https://picsum.photos/seed/mv8/400/225" alt="猫的羽根" class="w-full aspect-video object-cover">
            <div class="absolute inset-0 bg-black bg-opacity-20 flex items-center justify-center opacity-0 hover:opacity-100 transition-opacity">
              <i class="fa fa-play-circle text-white text-4xl"></i>
            </div>
            <div class="absolute bottom-2 right-2 bg-black bg-opacity-50 text-white text-xs px-2 py-1 rounded flex items-center">
              <i class="fa fa-eye mr-1"></i> 2861
            </div>
          </div>
          <div class="p-3">
            <h3 class="font-medium truncate text-center">猫的羽根</h3>
            <p class="text-graytext text-sm truncate text-center">RADWIMPS</p>
          </div>
        </div>
        
        <!-- MV9 -->
        <div class="bg-white rounded-lg overflow-hidden shadow card-hover">
          <div class="relative">
            <img src="https://picsum.photos/seed/mv9/400/225" alt="에필로그 (epilogue)" class="w-full aspect-video object-cover">
            <div class="absolute inset-0 bg-black bg-opacity-20 flex items-center justify-center opacity-0 hover:opacity-100 transition-opacity">
              <i class="fa fa-play-circle text-white text-4xl"></i>
            </div>
            <div class="absolute bottom-2 right-2 bg-black bg-opacity-50 text-white text-xs px-2 py-1 rounded flex items-center">
              <i class="fa fa-eye mr-1"></i> 7955
            </div>
          </div>
          <div class="p-3">
            <h3 class="font-medium truncate text-center">에필로그 (epilogue)</h3>
            <p class="text-graytext text-sm truncate text-center">IU</p>
          </div>
        </div>
        
        <!-- MV10 -->
        <div class="bg-white rounded-lg overflow-hidden shadow card-hover">
          <div class="relative">
            <img src="https://picsum.photos/seed/mv10/400/225" alt="Coffee" class="w-full aspect-video object-cover">
            <div class="absolute inset-0 bg-black bg-opacity-20 flex items-center justify-center opacity-0 hover:opacity-100 transition-opacity">
              <i class="fa fa-play-circle text-white text-4xl"></i>
            </div>
            <div class="absolute bottom-2 right-2 bg-black bg-opacity-50 text-white text-xs px-2 py-1 rounded flex items-center">
              <i class="fa fa-eye mr-1"></i> 1.15万
            </div>
          </div>
          <div class="p-3">
            <h3 class="font-medium truncate text-center">Coffee MV</h3>
            <p class="text-graytext text-sm truncate text-center">王源</p>
          </div>
        </div>
      </div>
    </section>
  </main>

  <!-- 页脚 -->
  <footer class="bg-gray-800 text-white mt-16">
    <div class="container mx-auto px-4 py-10">
      <div class="flex flex-col md:flex-row justify-between items-center">
        <div class="mb-6 md:mb-0">
          <div class="text-qqgreen text-2xl mb-2">
            <i class="fa fa-music mr-1"></i>
            <span class="font-bold">QQ音乐</span>
          </div>
          <p class="text-gray-400 text-sm">发现好音乐，分享好时光</p>
        </div>
        
        <div class="flex space-x-6">
          <a href="#" class="text-gray-400 hover:text-white transition-colors">
            <i class="fa fa-weibo text-xl"></i>
          </a>
          <a href="#" class="text-gray-400 hover:text-white transition-colors">
            <i class="fa fa-wechat text-xl"></i>
          </a>
          <a href="#" class="text-gray-400 hover:text-white transition-colors">
            <i class="fa fa-instagram text-xl"></i>
          </a>
          <a href="#" class="text-gray-400 hover:text-white transition-colors">
            <i class="fa fa-twitter text-xl"></i>
          </a>
        </div>
      </div>
      
      <div class="border-t border-gray-700 mt-8 pt-8 text-center text-gray-400 text-sm">
        <p>© 2023 QQ音乐 版权所有</p>
      </div>
    </div>
  </footer>

  <!-- 交互脚本 -->
  <script>
    // 模拟导航栏滚动效果
    window.addEventListener('scroll', function() {
      const header = document.querySelector('header');
      if (window.scrollY > 10) {
        header.classList.add('shadow');
      } else {
        header.classList.remove('shadow');
      }
    });
    
    // 为卡片添加点击效果
    document.querySelectorAll('.card-hover').forEach(card => {
      card.addEventListener('click', function() {
        console.log('点击了:', this.querySelector('h3').textContent);
      });
    });
  </script>
</body>
</html>